<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta http-equiv="cache-control" content="no-cache">
<title>Cute Core Test</title>
<script src="jquery-1.4.2.js"></script>
<script src="cute.js"></script>
<link href="http://beta.pao.sdo.com/c/public/ui.css" rel="stylesheet" />
<link href="http://beta.pao.sdo.com/c/paopao/skin.css" rel="stylesheet"  />
<link href="http://beta.pao.sdo.com/c/paopao/style.css" rel="stylesheet" type="text/css" />
<link href="http://beta.pao.sdo.com/c/public/common.css" rel="stylesheet" />

<script>
Cute.config.scriptPath = "";
</script>
</head>
<body><form method="post" id="regForm">
					<table width="100%" class="edit">
						<tbody>
							<tr>
								<td width="100" class="label">
									* 真实姓名：
								</td>
								<td>
										<input type="text" maxlength="30" value="吴超" size="14" class="text" id="RealName" name="RealName">
								<div class="formValidateTip"><div id="RealNameTip" style="display: none;" class="onFocus"><span class="validateTipIco"></span>请输入真实姓名，方便找到更多朋友</div></div></td>
							</tr>
							<tr>
								<td class="label">
									* 昵称：
								</td>
								<td>
										<input type="text" maxlength="30" value="我de艾蜜莉" size="20" class="text" id="UserName" name="UserName">
								<div class="formValidateTip"><div id="UserNameTip" style="display: none;" class="onFocus"><span class="validateTipIco"></span>取个凸显您个性的的昵称吧</div></div></td>
							</tr>
							<tr>
								<td class="label">
									* 性别：
								</td>
								<td>
									<label>
										<input type="radio" checked="checked" value="M" class="radio" id="Gender" name="Gender">&nbsp;男</label>&nbsp;&nbsp;
									<label>
										<input type="radio" value="F" class="radio" id="Gender1" name="Gender">&nbsp;女</label><div class="formValidateTip"><div id="GenderTip" style="display: none;"><span class="validateTipIco"></span></div></div>
								</td>
							</tr>
							<tr>
								<td class="label">
									出生年月日：
								</td>
								<td>
									<select class="select" id="bd_year" name="bd_year">
										<option value="">请选择..</option>
									<option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option><option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option><option value="1932">1932</option><option value="1931">1931</option><option value="1930">1930</option></select>
									年
									<select class="select" id="bd_month" name="bd_month">
										<option value="">请选择..</option>
									<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>
									月
									<select class="select" id="bd_day" name="bd_day">
										<option value="">请选择..</option>
									<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
									日
								<div class="formValidateTip"><div id="bd_yearTip" style="display: inline-block;" class="onCorrect"><span class="validateTipIco"></span>保密可不填</div></div></td>
							</tr>
							<tr>
								<td class="label">
									生肖：
								</td>
								<td id="zodiac">未知</td>
							</tr>
							<tr>
								<td class="label">
									星座：
								</td>
								<td id="constellation">未知</td>
							</tr>
							<tr>
								<td class="label">
									Email：
								</td>
								<td>
									<input type="text" maxlength="200" value="" size="42" class="text" id="Email" name="Email">
								<div class="formValidateTip"><div id="EmailTip" style="display: none;"><span class="validateTipIco"></span></div></div></td>
							</tr>
							<tr>
								<td class="label">
									MSN：
								</td>
								<td>
									<input type="text" maxlength="200" value="" size="42" class="text" id="MSN" name="MSN">
								<div class="formValidateTip"><div id="MSNTip" style="display: none;"><span class="validateTipIco"></span></div></div></td>
							</tr>
							<tr>
								<td class="label">
									QQ：
								</td>
								<td>
									<input type="text" maxlength="20" value="" size="20" class="text" id="QQ" name="QQ">
								<div class="formValidateTip"><div id="QQTip" style="display: none;"><span class="validateTipIco"></span></div></div></td>
							</tr>
							<tr>
								<td class="label">
									* 所在城市：
								</td>
								<td>
									<select class="select" id="StayProvince" name="StayCity">
										<option value="">请选择..</option>
									</select>
									<select style="display: none;" class="select" id="StayCity" name="StayCity">
									</select>
									<select style="display: none;" class="select" id="StayArea" name="StayCity">
									</select>
								<div class="formValidateTip"><div id="StayProvinceTip" style="display: none;"><span class="validateTipIco"></span></div></div></td>
							</tr>
							<tr>
								<td class="label">
								</td>
								<td>
									<input type="submit" value="保存" class="button submit" id="saveButton">
								</td>
							</tr>
						</tbody>
					</table>
					</form>
</body>

<script>
Cute.Pack.include("plugin/formValidator.js",function(){
	Cute.log("plugin/formValidator load complete!");
	$.formValidator.initConfig({ formid: "#regForm" });
	$("#RealName").formValidator({ onshow: "", onfocus: "请输入真实姓名，方便找到更多朋友" }).inputValidator({ min: 2, max: 10, onerror: "真实姓名至少4个字符（2个汉字），最多12个字符(5个汉字)，请确认" });
	$("#UserName").formValidator({ onshow: "", onfocus: "取个凸显您个性的的昵称吧" }).inputValidator({ min: 4, max: 20, onerror: "昵称至少4个字符（2个汉字），最多20个字符，请确认" });
	$("input:radio[name=Gender]").formValidator({ onshow: "", onfocus: "快选一个吧"}).inputValidator({ min: 1, onerror: "性别忘记选了，请确认" });
	$("#bd_year").formValidator({empty: true, onshow:"",onfocus:"请选择您的出生日期",onempty:"保密可不填"}).inputValidator({min:1,onerror:"请输入正确的出生日期"});
	$("#bd_month").formValidator({empty: true, onshow:"",onfocus:"请选择您的出生日期",onempty:"保密可不填",tipid:"bd_yearTip"}).inputValidator({min:1,onerror:"请输入正确的出生日期"});
	$("#bd_day").formValidator({empty: true, onshow:"",onfocus:"请选择您的出生日期",onempty:"保密可不填",tipid:"bd_yearTip"}).inputValidator({min:1,onerror:"请输入正确的出生日期"});
	$("#Email").formValidator({ empty: true, onshow: "", onempty: "不留个Email吗？方便接收社区的动态信息！", onfocus: "提供您的Email，方便接收社区的动态信息", oncorrect: "谢谢提供" }).inputValidator({ max: 200, onerror: "邮箱长度不能超过200个字符，请确认" }).regexValidator({ regexp: "^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$", onerror: "你输入的邮箱格式不正确" });
	$("#MSN").formValidator({ empty: true, onshow: "", onempty: "不留个MSN吗？方便好友联系你哦！", onfocus: "方便好友联系你", oncorrect: "谢谢提供" }).inputValidator({ max: 200, onerror: "MSN账号长度不能超过200个字符，请确认" }).regexValidator({ regexp: "^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$", onerror: "你输入的邮箱格式不正确" });
	$("#QQ").formValidator({ empty: true, onshow: "", onfocus: "方便好友联系你", onempty: "不留个QQ吗？方便好友联系你哦！", oncorrect: "谢谢你的合作，你的QQ号码正确" }).regexValidator({ regexp: "qq", datatype: "enum", onerror: "QQ号码格式不正确" });
	$("#StayProvince").formValidator({ onshow: "", onfocus: "能帮您找出同城好友哦" }).inputValidator({ min: 1, onerror: "你是不是忘记选择居住地了!" });
},{done: true});
</script>
</html>